<template>
  <!-- 如果有子项，子项长度 > 0 -->
  <el-submenu
      v-if="!subroute.meta.hide &&
        subroute.children &&
        subroute.children.length > 0"
      :index="subroute.name">
    <!-- 创建菜单分组 -->
    <template slot="title">
      <i :style="{ 'width': '14px' }"
         class="el-icon- iconfont"
         :class="subroute.meta.icon"></i>
      <span>{{subroute.meta.name}}</span>
    </template>

    <!-- 递归调用自身，直到 subroute 不含子节点 -->
    <sidebar-item
        v-for="(submenu, subidx) in subroute.children"
        :subroute="submenu"
        :barIdx="subidx"
        :key="submenu.name">
    </sidebar-item>

  </el-submenu>

  <!-- 否则 -->
  <el-menu-item
      v-else-if="!subroute.meta.hide &&
         !subroute.children"
      :index="subroute.path">
    <i :style="{ 'width': subroute.meta.icon==='none'?'24px':'14px' }"
       class="el-icon- iconfont"
       :class="subroute.meta.icon"></i>
    <span slot="title">{{subroute.meta.name}}</span>
  </el-menu-item>
</template>

<script>
export default {
  name: 'SidebarItem',
  props: {
    subroute: {
      type: Object
    },
    barIdx: {
      type: [String, Number]
    },
  },
  computed: {
    // 默认激活的路由, 用来激活菜单选中状态
    defaultActive: function() {

    },
  },
  created() {

  },
  methods: {
    handleOpen: function(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose: function(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped lang="less">
</style>
